import React, { useRef, useEffect, useState } from 'react';
import { Button, Modal, Popconfirm, Select, Input } from 'antd';
import renderAsyncTable from 'components/hooks/useAsyncTable';
import { getUserList, IUser } from 'api/User';
import Breadcrumb from 'components/common/Breadcrumb';
import './index.less';
import { useRequest } from 'ahooks';
import { getAllArea } from 'api/Area';
import { getRoleSelect } from 'api/Role';
import { PlusOutlined } from '@ant-design/icons';
import UserForm from 'components/forms/UserForm';
const UserManage = () => {
    const { data: areas = [] } = useRequest(getAllArea);
    const { data: roles = [] } = useRequest(getRoleSelect);
    const [ visible, setVisible ] = useState(false)
    const [ userInEdit, setUserInEdit ] = useState<IUser>()
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
        },
        {
            title: '账号ID',
            dataIndex: 'email',
        },
        {
            title: '姓名',
            dataIndex: 'username',
        },
        {
            title: '手机',
            dataIndex: 'mobile',
        },
        {
            title: '账号类型',
            dataIndex: 'name',
        },
        {
            title: '负责区域',
            dataIndex: 'areaId',
            render: (text: any) => <span>{areas.find((item) => item.id === text)?.name}</span>,
        },
        {
            title: '配置时间',
            dataIndex: 'createTime',
        },
        {
            title: '操作',
            render: ({}, record: any) => (
                <>
                    <Button size="small" onClick={() => editUser(record)} className="mr10">
                        编辑
                    </Button>
                    <Popconfirm
                        title="删除后，该账号将无法登陆，是否继续？"
                        okText="确定"
                        cancelText="取消"
                        onConfirm={() => deleteUser(record)}
                    >
                        <Button danger size="small" className="mr10">
                            删除
                        </Button>
                    </Popconfirm>
                    <Popconfirm
                        title="密码将恢复成系统默认 000000, 是否继续？"
                        okText="确定"
                        cancelText="取消"
                        onConfirm={() => resetPassword(record)}
                    >
                        <Button size="small">密码重置</Button>
                    </Popconfirm>
                </>
            ),
        },
    ];
    /** 编辑账号 */
    const editUser = (user: IUser) => {
        setVisible(true)
        setUserInEdit(user)
    };
    /** 删除用户 */
    const deleteUser = (record: IUser) => {
        console.log(record);
    };
    /** 密码重置 */
    const resetPassword = (record: IUser) => {
        console.log(record);
    };
    const getTableData = (data: any) => getUserList(data);
    const [queryParams, setQueryParams] = useState<any>()
    const asyncTable = renderAsyncTable(columns, getTableData, queryParams)
    const inputRef: any = useRef()
    /** 查询列表 */
    const queryTable = () => {
        setQueryParams({ search: inputRef.current.state.value })
    }
    /** 添加用户 */
    const addUser = () => {
        setUserInEdit(undefined)
        setVisible(true)
    }
    const onOk = () => {
        setVisible(false)
    }
    const onCancel = () => {
        setVisible(false)
    }
    return (
        <div className="user-manage">
            <Breadcrumb crumbs={['路桩配置', '添加路桩']}></Breadcrumb>
            <div className="flex-between">
                <Button className="mb10" onClick={addUser}><PlusOutlined/>添加账号</Button>
                <div>
                    <span className="mr10">账号类型</span>
                    <Select placeholder="请选择" className="mr10" style={{ width: 150}}>
                        {roles.map((item: any) => (
                            <Select.Option key={item.id} value={item.id}>{item.roleName}</Select.Option>
                        ))}
                    </Select>
                    <Input ref={inputRef} placeholder="支持账号ID、管理员姓名、手机号查询" style={{width: 300}} className="mr10"></Input>
                    <Button onClick={queryTable}>查询</Button>
                </div>
            </div>
            {asyncTable}
            <Modal title="添加用户" visible={visible} onOk={onOk} onCancel={onCancel} okText="确定" cancelText="取消">
                <UserForm areas={areas} user={userInEdit}/>
            </Modal>
        </div>
    );
};
export default UserManage;
